﻿
Ext.define('imageurl', {
    extend: 'Ext.data.Model',
    fields: [{ name: 'name', type: 'string' }, { name: 'url', type: 'string' }, { name: 'size', type: 'float' }, { name: 'type', type: 'string'}]

});
var imagestore = new Ext.data.Store({
    model: 'imageurl',
    autoLoad: true,
    //            autoSync: true,
    //            queryMode: 'local',

    proxy: {
        type: 'ajax',
        url: '../DataViewImages.aspx',
        reader: {
            type: 'json',
            root: 'images'
        }
    }

});

//imagestore.load();
//
Ext.define('Ext.ux.DataView.dataview', {
    extend: 'Ext.view.View',
    alias: 'widget.dataview',
    store: imagestore,
    tpl: [
            '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<div class="thumb"><img src="{url}" title="{name}"></div>',
            '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
            ],
    //height: 300,
    autoHeight: true
   
    });
//


    Ext.define("Ext.ux.DataView.images-view", {
        extend: 'Ext.form.Panel',
        requires: ['Ext.resizer.Resizer'],
        alias: 'widget.images-view',
        frame: true,
        id: "images-view",
        //width: 535,
        // autoHeight: true,
        height: 800,
        //collapsible: true,
        layout: 'fit',
        title: '图片列表(0 项 被选中)',
        tbar: [
                    { text: "添加图片", id: "addimage", handler: insertImages }, "-",
                     { text: "删除图片", id: "deleteimage", handler: deleteImages }
                   ],
        initComponent: function() {
            //            var me = this;
            //            Ext.applyIf(me, {
            //                items:[{
            //                    xtype: 'dataview',
            //                    id: 'imagedataview',
            //                        autoHeight: true
            //
            //}]});

            var dataview = Ext.widget('dataview', { tpl: [
            '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}" >',
            '<div class="thumb"><span class="x-editable">{type}</span><a href="{url}" target="_blank">浏览原图</a><img src="{url}" class="zoom" big="{url}" title="{name}"></div>',
           '<span class="x-editable"></span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
            ],
                id: 'imagedataview',
                //height: 300,
                autoHeight: true,
                width: 800,
                //simpleSelect: true,
                multiSelect: true,
                trackOver: true,
                //            singleSelect: true,
                overItemCls: 'x-item-over',
                overClass: 'x-view-over',
                itemSelector: 'div.thumb-wrap',
                emptyText: 'No images to display',

                plugins: [
            Ext.create('Ext.ux.DataView.DragSelector', {})
                // Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'name' })
                // new Ext.DataView.DragSelector()
                //                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],


                prepareData: function(data) {
                    data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                    data.sizeString = Ext.util.Format.fileSize(data.size);
                    //                data.dateString = data.date.format("m/d/Y g:i a");


                    return data;
                },

                listeners: {
                    selectionchange: {
                        fn: function(dv, nodes) {
                            var l = nodes.length;
                            var s = ''; //l != 1 ? 's' : '';
                            Ext.getCmp('images-view').setTitle('图片列表 (' + l + ' 项' + s + ' 被选中)');
                         
                        }

                    }
//                    'itemdblclick': function(dv, nodes) {
//                        // var selNode = Ext.getCmp('imagedataview').getSelectedNodes()[0];
//                    var targetid = Ext.getCmp('imagedataview').getRecord( Ext.getCmp('imagedataview').getSelectedNodes()[0]);
//                    var tarid = "#"+targetid.data.type;
//                        var transparent = Ext.create('Ext.resizer.Resizer', {
//                        target: '"+tarid+"',
//                            minWidth: 50,
//                            minHeight: 50,
//                            preserveRatio: true,
//                            transparent: true
//                        });
//                    }
                }
            });
            this.items = [dataview];
            this.callParent(arguments);
        },

        setActiveRecord: function(record) {

            if (record) {
                var imageid = record.data.id;
                recordid = imageid;
                imagestore.setProxy(
                                {
                                    type: 'ajax',
                                    api: {
                                        read: '../DataViewImages.aspx'
                                    },
                                    reader: {
                                        type: 'json',
                                        root: 'images'
                                    },
                                    extraParams: {
                                        imageid: imageid


                                    },
                                    listeners: {
                                        exception: function(proxy, response, operation) {
                                            Ext.MessageBox.show({
                                                title: 'REMOTE EXCEPTION',
                                                msg: operation.getError(),
                                                icon: Ext.MessageBox.ERROR,
                                                buttons: Ext.Msg.OK
                                            });
                                        }
                                    }
                                }
                            );
                imagestore.load();
            } else {

            }
        }
    });
    var recordid ;
      Ext.define('insertimage', {
        extend: 'Ext.form.Panel',
        alias: 'widget.insertimage',
        title: '图片上传',
        width: 400,
        height: 100,
        bodyPadding: 10,
        // margin: '50 10 50 80',

        frame: true,
        //renderTo: 'upload',
        items: [{
            xtype: 'filefield',
            name: 'fileName',
            fieldLabel: '上传',
            labelWidth: 50,
            regex: /^.+\.(bmp|jpg|png|gif|JPG|GIF|PNG|BMP)$/,
            regexText: "你只能选择jpg,png,gif格式的图片",
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: '选择文件'
}],

            buttons: [{
                text: '上传',
                handler: function() {
                   
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            url: '../UploadS.aspx',
                            type: 'ajax',
                            params:
                            {
                            recordid:recordid,
                            imagetype: Ext.getCmp('imagedataview').getSelectedNodes()[0].id.substring(0,6)
                            },
                            waitMsg: '正在保存文件...',
                            success: function(fp, o) {
                                // Ext.Msg.alert('提示信息', '文件成功上传,文件名字为：'+o.result.file);
                                Ext.Msg.show({
                                    title: '提示信息',
                                    msg: '文件上传成功<br>上传图片为：' + Ext.getCmp('imagedataview').getRecord( Ext.getCmp('imagedataview').getSelectedNodes()[0]).data.type,
                                    minWidth: 200,
                                    modal: true,
                                    buttons: Ext.Msg.OK
                                })
                                form.findField('fileName').setRawValue('');
                                imagestore.load({
                                    params: {
                                   imageid:recordid 
                                    }
                                });
                                //Ext.getCmp('imagedataview').refresh();
                                Ext.getCmp('content2').setVisible(false);
                                Ext.getCmp('content2').destroy();
                            }
                        });
                        
                        //                        Ext.getCmp('tasklist1').setVisible(true);
 
                    }
                    //var  timeId = window.setInterval("updateUsing()", 25000);
    
                }
}]
            });
            function insertImages() {
                var nodecol = Ext.getCmp('imagedataview').getSelectedNodes();
                var count = nodecol.length;
                // var count = dataview.getSelectionCount();
                //var count = Ext.getCmp('dv').getSelectionCount();
                var nodes = new Array();

                if (count == 0) {
                    Ext.Msg.show({
                        title: "提示框",
                        msg: "请选择下面表中某种类型的图片进行上传",
                        buttons: Ext.MessageBox.OK,
                        icon: Ext.MessageBox.INFO
                    });

                    return false;
                }

                var contentdlg = Ext.create('Ext.window.Window', {
                    width: 400,
                    height: 300,
                    closable: true,
                    draggable: true,
                    resizable: false,
                    maximized: false,
                    modal: true,
                    title: '上传图片',
                    id: 'content2',
                    plain: true,
                    layout: 'vbox',
                    items:[{
                           xtype: 'insertimage',
                           id: 'mainform2'
                           }]
                 

                    });
                    contentdlg.show();

                  
                };
                
                function deleteImages() {
                    var nodecol = Ext.getCmp('imagedataview').getSelectedNodes();
                    var count = nodecol.length;
                    // var count = dataview.getSelectionCount();
                    //var count = Ext.getCmp('dv').getSelectionCount();
                    var nodes = new Array();

                    if (count == 0) {
                        Ext.Msg.show({
                            title: "提示框",
                            msg: "请选择要删除的图片",
                            buttons: Ext.MessageBox.OK,
                            icon: Ext.MessageBox.INFO
                        });

                        return false;
                    }

                    for (var i = 0; i < count; i++) {
                        nodes[i] = Ext.getCmp('imagedataview').getSelectedNodes()[i].id;
                    }

                    Ext.Msg.confirm("提示框", "你确认删除所选图片吗", function(button) {
                        if (button == "yes") {
                            Ext.MessageBox.show({
                                msg: "请等待...",
                                progress: true,
                                progressText: '删除中...',
                                width: 300,
                                wait: true,
                                waitConfig: {
                                    interval: 100,
                                    duration: 1000,
                                    fn: function() {
                                        Ext.Ajax.request({
                                            url: "../DeleteImages.aspx",
                                            params: {
                                                Nodes: nodes
                                            },
                                            callback: function(options, success, response) {
                                            if (success == true) {
                                                    Ext.Msg.show({
                                                        title: "提示框",
                                                        msg: "删除图片成功",
                                                        buttons: Ext.MessageBox.OK,
                                                        icon: Ext.MessageBox.INFO,
                                                        fn: function() {
                                                           
                                                           //Ext.getCmp('imagedataview').refresh();
                                                        }
                                                    });
                                                    imagestore.load({
                                                        params: {
                                                        imageid: recordid 
                                                        }
                                                    });
                                                }
                                                else {
                                                    Ext.Msg.show({
                                                        title: "提示框",
                                                        msg: "删除图片失败, 请重试",
                                                        buttons: Ext.MessageBox.OK,
                                                        icon: Ext.MessageBox.WARNING
                                                    });
                                                }
                                            }
                                        });

                                        Ext.MessageBox.hide();
                                    }
                                },
                                closable: true
                            });
                        }
                    });
                };
                
                
